<template>
	<view>
		<view class="info">
			<view class="">覆盖DLR数：{{allinfo.DLR ? allinfo.DLR : '0'}}</view>
			<view class="">已实施场次：{{allinfo.shi_shi ? allinfo.shi_shi : '0' }}</view>
			<view class="">A卡：{{he_ji.shi.aka ? he_ji.shi.aka : '0'}}</view>
			<view class="">达成率：{{he_ji.rate.aka_rate? he_ji.rate.aka_rate*100 : '0'}}%</view>
			<view class="">订单：{{ he_ji.shi.dingdan? he_ji.shi.dingdan : '0' }}</view>
			<view class="">达成率：{{he_ji.rate.dingdan_rate? he_ji.rate.dingdan_rate*100 : '0'}}%</view>	
		</view>
		
		
		
		
<!-- 		<view class="searchBox" @click="tiaosou">
			<view class="inputBox">
				<image src="/static/pages/index/searchImg.png" mode="" class="searchImg"></image>
				<input v-model="searchText" class="inpt" placeholder="请输入活动名称" placeholder-style="color:#9DA0A9;font-size:26rpx;" />
			</view>
			<view class="searchInput" @click="search">搜索</view>
		</view> -->
		<view class="" style="width: 100%;  overflow: scroll;"  >
			<uni-table border  emptyText="暂无更多数据"  >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center"  >
							序号
					</uni-th>
					<uni-th align="center">经销商</uni-th>
					<uni-th  align="center">实施时间</uni-th>
					<uni-th width='100' align="center" >
						<view class="">
							<view style="width: 100%;">曝光</view>
							<view  style="display: flex; justify-content: space-around; width: 200rpx;">
								<view class="" >实际</view>
								<view class="">达成率</view>
							</view>
						</view>
					</uni-th>
					<uni-th width='100' align="center" >
						<view class="">
							<view style="width: 100%;">线索</view>
							<view  style="display: flex; justify-content: space-around; width: 200rpx;">
								<view class="" >实际</view>
								<view class="">达成率</view>
							</view>
						</view>
					</uni-th>
					<uni-th width='100' align="center" >
						<view class="">
							<view style="width: 100%;">A卡</view>
							<view  style="display: flex; justify-content: space-around; width: 200rpx;">
								<view class="" >实际</view>
								<view class="">达成率</view>
							</view>
						</view>
					</uni-th>
					<uni-th width='100' align="center" >
						<view class="">
							<view style="width: 100%;">订单</view>
							<view  style="display: flex; justify-content: space-around; width: 200rpx;">
								<view class="" >实际</view>
								<view class="">达成率</view>
							</view>
						</view>
					</uni-th>

				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in list" :key="index">
					<!-- 序号 -->
					<uni-td style='text-align: center;'>
						<view class="" style="text-align: center;">
							{{index+1}}
						</view>
					</uni-td>
					<!-- 经销商 -->
					<uni-td style='text-align: center;'>
						<view class="li_3"  style="text-align: center;">{{ item.stores }}</view>
					</uni-td>
					<!-- 实施时间 -->
					<uni-td style='text-align: center; '>
						<view class="li_3"  style="text-align: center;">{{ item.activitytime }}</view>
					</uni-td>
					<!-- 曝光 -->
					<uni-td style='text-align: center;'>
						<view class="" style="display: flex; justify-content: space-around;">
							<view class="li_3">{{ item.feedback_three.xiaoshou }}</view>
							<view class="li_3">{{ item.rate.baoguang_rate*100 }}%</view>
						</view>
					</uni-td>
					<!-- 线索 -->
					<uni-td style='text-align: center;'>
						<view class="" style="display: flex; justify-content: space-around;">
							<view class="li_3">{{ item.feedback_three.xiansuo }}</view>
							<view class="li_3">{{ item.rate.xiansuo_rate*100 }}%</view>
						</view>
					</uni-td>
					<!-- A卡 -->
					<uni-td style='text-align: center;'>
						<view class="" style="display: flex; justify-content: space-around;">
							<view class="li_3">{{ item.feedback_three.aka }}</view>
							<view class="li_3">{{ item.rate.aka_rate*100 }}%</view>
						</view>
					</uni-td>
					<!-- 订单 -->
					<uni-td style='text-align: center;'>
						<view class="" style="display: flex; justify-content: space-around;">
							<!-- <view class="li_3">{{ item.createtime }}</view>
							<view class="li_3">{{ item.createtime }}</view> -->
							<view class="li_3">{{ item.feedback_three.dingdan }}</view>
							<view class="li_3">{{ item.rate.dingdan_rate*100 }}%</view>
						</view>
					</uni-td>
				</uni-tr>
				
				<!--合计 -->
				
				<uni-tr v-if="allinfo">
				<uni-td style='border-right: none;'></uni-td>
				<uni-td style='text-align: center; border-right: none;'>
					<view class="" style='text-align: center; letter-spacing: 30rpx;'>
						合计
					</view>
				</uni-td>
				<uni-td style='border-left: none;'></uni-td>
				<!-- 曝光 -->
				<uni-td style='text-align: center;'>
					<view class="" style="display: flex; justify-content: space-around;">
						<view class="li_3">{{he_ji.shi.xiaoshou}}</view>
						<view class="li_3">{{he_ji.rate.baoguang_rate*100}}%</view>
					</view>
				</uni-td>
				<!-- 线索 -->
				<uni-td style='text-align: center;'>
					<view class="" style="display: flex; justify-content: space-around;">
						<view class="li_3">{{he_ji.shi.xiansuo}}</view>
						<view class="li_3">{{he_ji.rate.xiansuo_rate*100}}%</view>
					</view>
				</uni-td>
				<!-- A卡 -->
				<uni-td style='text-align: center;'>
					<view class="" style="display: flex; justify-content: space-around;">
						<view class="li_3">{{he_ji.shi.aka}}</view>
						<view class="li_3">{{he_ji.rate.aka_rate*100}}%</view>
					</view>
				</uni-td>
				<!-- 订单 -->
				<uni-td style='text-align: center;'>
					<view class="" style="display: flex; justify-content: space-around;">
						<view class="li_3">{{he_ji.shi.dingdan}}</view>
						<view class="li_3">{{he_ji.rate.dingdan_rate*100}}%</view>
					</view>
				</uni-td>
					
					
					
					
					
				</uni-tr>
			</uni-table>
		</view>
		
	</view>
</template>

<script>
import { regionexaminecchakan,specific  } from '@/request/api.js';
export default {
	data() {
		return {
			type: 1,
			page: 1,
			pageShow: false,
			list: [],
			showIndex: 0,
			searchText:'',
			info:'',
			he_ji:'',
			allinfo:''
		};
	},
	onLoad(options) {
		this.info = JSON.parse(options.info)
		console.log(this.info);
		if(this.info){
			this.init();
		}
	},
	onReachBottom() {
		// if (pageShow) {
		// 	this.init();
		// }
	},
	methods: {
		// tiaosou(){},
		init() {
			let _this = this;
			let data = {
				activity_id: _this.info.id,
				region_id: _this.info.regional_ids,
			};
			specific(data).then(res => {
				console.log(res.data);
				// if (res.code == 1) {
				// 	// console.log(res)\
				// 	if (res.data.data.length > 0) {
					    _this.allinfo = res.data;
						_this.list = res.data.list;
						_this.he_ji = res.data.he_ji;
				// 		_this.page++;
				// 		_this.pageShow = true;
				// 		_this.list.forEach(item => {
				// 			if (item) {
				// 				item.avatar = 'https://dy.nuofenggr.com' + item.avatar;
				// 			}
				// 		});
				// 	} else {
				// 		_this.pageShow = false;
				// 	}
				// }
			});
		},
		search(){
			let that = this
			
			if(that.searchText ==''){
				uni.showToast({
					title:'请输入内容',
					icon:'none'
				})
			}else{
				that.init()
			}
		},
		changClick(type) {
			this.showIndex = type;
			this.list = [];
			this.page = 1;
			if (this.showIndex == 0) {
				this.type = 1;
				this.init();
			} else if (this.showIndex == 1) {
				this.type = 2;
				this.init();
			} else {
				this.type = 3;
				this.init();
			}
		}
	}
};
</script>

<style lang="scss">
.zong {
}
.user_list {
	width: 1800rpx;
	.li {
		display: flex;
		text-align: center;
		width: 1400rpx;
		align-items: center;
		.li_3 {
			width: 200rpx;
			flex-shrink: 0;
		}
		.li_1 {
			display: flex;
			align-items: center;
			width: 200rpx;
			flex-shrink: 0;
			.li_1_1 {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				background-color: pink;
				// image{
				// 	width:68rpx ;
				// 	height: 68rpx;
				// 	border-radius: 50%;
				// 	margin: 0 20rpx;
				// }
			}
		}
	}
}
.tit_list {
	display: flex;
	align-items: center;
	width: 1400rpx;
	view {
		width: 200rpx;
		flex-shrink: 0;
		text-align: center;
	}
}
.shiduan {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 30rpx 0;
	view {
		width: 30%;
		background: #94aff4;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		line-height: 60rpx;
	}
	.views {
		width: 30%;
		background: #1855f6;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		line-height: 60rpx;
	}
}
.searchBox {
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;

	.inputBox {
		width: 580rpx;
		height: 70rpx;
		background-color: #f0f1f5;
		border-radius: 60rpx;
		display: flex;

		.searchImg {
			width: 28rpx;
			height: 28rpx;
			margin: 21rpx 21rpx 0 24rpx;
		}

		.inpt {
			margin-top: 15rpx;
		}
	}

	.searchInput {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2e2f33;
		margin-right: 40rpx;
		margin-top: 17rpx;
	}	
}

.info{
		width: 80%;
		margin: 20rpx auto;
		// border: 1px solid #000;
		display: flex;
		flex-wrap: wrap;
	}	
	.info view{
		width: 50%;
		height: 60rpx;
	} 
</style>
